<template>
	<div style="height: 70px;">

		<div style="height: 70px;width: 100%;background-color: #FFFFFF;z-index: 998;" align="center">
			<div style="width: 60%;height: 100%;">
				<el-col :span="12" style="text-align: left;height: 70px;">
					<a href="javascript:;"><img src="../assets/logo.png" style="height: 60px;margin-top: 5px;"
							onclick="window.location.href='/'" /></a>
				</el-col>
				<el-col :span="12" style="text-align: right;;height: 70px;">
					<div style="margin-top: 15px;">
						<el-button size="medium" round icon="el-icon-user" style="height: 40px;" @click="loginCall()"
							v-if="!LoginOrNot">
							请登录
						</el-button>
						<div v-else style="height: 40px;">

							<div style="display: inline-block">
								<el-popover placement="top" width="250" trigger="hover" v-model="visible">

									<div style="padding: 10px;background-color: #FFFFFF;">
										<!-- 										<div style="text-align: center;font-size: 17px;font-weight: 900;">
											bili_47216248749
										</div> -->

										<a href="javascript:;" style="text-decoration:none;color: rgb(168, 168, 168);"
											@click="myinfo()">
											<div style="border-radius: 7px;margin-top: 10px;height: 40px;line-height: 40px;font-size: 15px;padding-left: 10px;padding-right: 10px;"
												class="select">
												<div style="width: 80%;text-align: left;display: inline-block;">
													<i class="el-icon-user"></i> <span
														style="margin-left: 10px;">个人中心</span>
												</div>
												<div style="width: 20%;text-align: right;display: inline-block;">
													<i class="el-icon-arrow-right"></i>
												</div>
											</div>
										</a>
<!-- 										<a href="javascript:;" style="text-decoration:none;color: rgb(168, 168, 168);">
											<div style="border-radius: 7px;margin-top: 10px;height: 40px;line-height: 40px;font-size: 15px;padding-left: 10px;padding-right: 10px;"
												class="select">
												<div style="width: 80%;text-align: left;display: inline-block;">
													<i class="el-icon-edit-outline"></i> <span
														style="margin-left: 10px;">创作中心</span>
												</div>
												<div style="width: 20%;text-align: right;display: inline-block;">
													<i class="el-icon-arrow-right"></i>
												</div>
											</div>
										</a>
										<a href="javascript:;" style="text-decoration:none;color: rgb(168, 168, 168);">
											<div style="border-radius: 7px;margin-top: 10px;height: 40px;line-height: 40px;font-size: 15px;padding-left: 10px;padding-right: 10px;"
												class="select">
												<div style="width: 80%;text-align: left;display: inline-block;">
													<i class="el-icon-star-off"></i> <span
														style="margin-left: 10px;">收藏</span>
												</div>
												<div style="width: 20%;text-align: right;display: inline-block;">
													<i class="el-icon-arrow-right"></i>
												</div>
											</div>
										</a> -->

										<hr
											style="margin-top: 10px;border: none;border-bottom: 1px rgb(168, 168, 168, 0.3) solid;" />

										<a href="javascript:;" style="text-decoration:none;color: rgb(168, 168, 168);"
											@click="aviationLoginOut()">
											<div style="border-radius: 7px;margin-top: 10px;height: 40px;line-height: 40px;font-size: 15px;padding-left: 10px;padding-right: 10px;"
												class="select">
												<div style="width: 80%;text-align: left;display: inline-block;">
													<i class="el-icon-switch-button"></i> <span
														style="margin-left: 10px;">退出登录</span>
												</div>
												<div style="width: 20%;text-align: right;display: inline-block;">
													<i class="el-icon-arrow-right"></i>
												</div>
											</div>
										</a>

									</div>

									<el-button slot="reference" style="background: url(https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg);
									height: 40px;width: 40px;background-size: cover;border: none;border-radius: 10%;"></el-button>
								</el-popover>

<!-- 								<a href="/TourismSharing">
									<button style="height: 40px;width: 100px;margin-left: 20px;border-radius: 5px;border: none;background-color: #409EFF;
								color: #FFFFFF;">
										<i class="el-icon-upload el-icon--right"
											style="margin-right: 5px;font-size: 15px;"></i>
										<span style="font-weight: 900;">创作</span>
									</button>
								</a> -->
							</div>

						</div>
					</div>
				</el-col>
			</div>
		</div>

		<el-form :model="aviationUserName" ref="aviationUserName" class="demo-ruleForm">
			<div v-if="loginModule" style="width: 400px;display:inline-block;border-radius: 1%;box-shadow: 0px 0px 5px rgb(0, 0, 0, 0.4);
			position: fixed;top: 30%;left: 0;right: 0;margin: 0 auto;z-index: 999;background-color: #FFFFFF;">
				<div style="width: 90%;margin-left: 5%;margin-top: 5%;margin-bottom: 5%;">
					<el-row>
						<el-col :span="24" style="margin-bottom: 5%;">
							<el-col :span="12" style="text-align: left;">
								<strong style="font-size: 20px;">账号密码登录</strong>
							</el-col>
							<el-col :span="12" style="text-align: right;">
								<strong style="font-size: 20px;"><a href="#"
										style="text-decoration:none;color: #000000;"
										@click="resetForm('aviationUserName')"><i
											class="el-icon-close"></i></a></strong>
							</el-col>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<el-form-item prop="email" :rules="[
						      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
						      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
						    ]">
								<el-input v-model="aviationUserName.email" placeholder="邮箱"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<el-form-item prop="password" :rules="[
							  { required: true, message: '请输入密码', trigger: 'blur' }
							]">
								<el-input type="password" v-model="aviationUserName.password" autocomplete="off"
									placeholder="登陆密码"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<el-button type="primary" style="width: 100%;" @click="aviationLogin('aviationUserName')"
								:loading="loading">{{loginButton}}</el-button>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24" style="margin-bottom: 3%;">
							<el-checkbox class="myRedCheckBox" v-model="checked">
								<p style="color: #000000;">阅读并同意<a href="javascript:;"
										style="color: #409EFF;text-decoration:none;">服务协议</a>与<a href="javascript:;"
										style="color:#409EFF;text-decoration:none;">个人信息保护政策</a></p>
							</el-checkbox>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12">
							<a href="javascript:;" style="color: #409EFF;text-decoration:none;font-size: 15px;"
								onclick="window.location.href='/logon'">免费注册</a>
						</el-col>
						<el-col :span="12" style="text-align: right;">
							<a href="javascript:;" style="color: #409EFF;text-decoration:none;font-size: 15px;"
								onclick="window.location.href='/retrievePwd'">忘记密码</a>
						</el-col>
					</el-row>
				</div>
			</div>
		</el-form>
	</div>
</template>

<script>
	import axios from 'axios';
	import io from "socket.io-client"

	export default {
		data() {
			return {
				visible: false,
				aviationUserName: {
					email: '',
					password: ''
				},
				checked: false,
				loginModule: false,
				loading: false,
				loginButton: "登录",
				LoginOrNot: false,
				patt: /^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[@#$%^&+=._])(?=\S+$).{8,16}$/
			}
		},
		created() {
			if (sessionStorage.getItem("eleToken") !== null) {
				let opts = {
					query: 'token=' + sessionStorage.getItem("sessionId"),
					transports: ['websocket']
				};
				const socket = io("http://127.0.0.1:9099", opts);
				var this_vue = this;
				socket.on('forcedReturn', function(data) {
					if (data.code === 704) {
						sessionStorage.removeItem("eleToken");
						sessionStorage.removeItem("session");
						this_vue.$alert(data.msg, '提示', {
							confirmButtonText: '确定',
							callback: action => {
								location.reload();
							}
						});
					}
				});
				this.LoginOrNot = true;
			}
		},
		methods: {
			aaaa() {
				console.log("Aaaaaaaa")
			},
			myinfo() {
				sessionStorage.setItem("switch", 1);
				location.href = "/myinfo"
			},
			loginCall() {
				var previously = JSON.parse(JSON.stringify(this.loginModule));
				this.loginModule = true;
				return previously;
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
				this.loginModule = false;
				this.checked = false;
			},
			aviationLogin(formName) {
				if (!this.checked) {
					this.$message({
						dangerouslyUseHTMLString: true,
						message: '<strong>请先同意服务条款</strong>',
						type: 'error'
					});
					return false;
				}
				this.loading = true;
				this.loginButton = "登陆中";

				this.$refs[formName].validate((valid) => {
					if (valid) {
						if (this.aviationUserName.password.match(this.patt)) {
							var formData = new FormData();
							formData.append('name', this.aviationUserName.email);
							formData.append('password', this.aviationUserName.password);
							axios.post("api/userAction/login", formData)
								.then((res) => {
									if (res.data.code === 200) {
										var userData = JSON.parse(res.data.data);
										sessionStorage.setItem("eleToken", userData.token);
										sessionStorage.setItem("mailbox", userData.userName);
										sessionStorage.setItem("sessionId", userData.session);
										location.reload();
									} else {
										this.$message({
											dangerouslyUseHTMLString: true,
											message: '<strong>' + res.data.msg + '</strong>',
											type: 'error'
										});
									}
								})
						} else {
							this.$message({
								dangerouslyUseHTMLString: true,
								message: '<strong>密码格式不正确</strong>',
								type: 'error'
							});
						}
					}
				});
				this.loading = false;
				this.loginButton = "登陆";
				return false;
			},
			aviationLoginOut() {
				axios.post("api/userAction/loginOut")
					.then((res) => {
						sessionStorage.removeItem("eleToken");
						sessionStorage.removeItem("mailbox");
						sessionStorage.removeItem("sessionId");
						location.reload();
					})
			}
		}
	}
</script>

<style>
	* {
		margin: 0;
		padding: 0;
	}

	/* 设置带边框的checkbox，选中后边框的颜色 */
	.myRedCheckBox.is-bordered.is-checked {
		border-color: #000000;
	}

	/* 设置选中后的文字颜色 */
	.myRedCheckBox .el-checkbox__input.is-checked+.el-checkbox__label {
		color: #000000;
	}

	/* 设置选中后对勾框的边框和背景颜色 */
	.myRedCheckBox .el-checkbox__input.is-checked .el-checkbox__inner,
	.myRedCheckBox .el-checkbox__input.is-indeterminate .el-checkbox__inner {
		border-color: #000000;
		background-color: #000000;
	}

	/* 设置checkbox获得焦点后，对勾框的边框颜色 */
	.myRedCheckBox .el-checkbox__input.is-focus .el-checkbox__inner {
		border-color: #000000;
	}

	/* 设置鼠标经过对勾框，对勾框边框的颜色 */
	.myRedCheckBox .el-checkbox__inner:hover {
		border-color: #000000;
	}

	.select:hover {
		background-color: rgb(0, 0, 0, 0.1);
		transition: 1s;
	}
</style>